<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现网页开关灯的效果</title>
    <style type="text/css">
        .cls {
            background-color: black;
        }
    </style>
</head>

<body class="cls">
    <input type="button" value="开灯" id="btn">
    <!-- <script type="text/javascript"></script> -->
    <script type="text/javascript">
        //网页开关灯效果实现（设置整个页面的背景色）（样式操作class类名操作）
        //类名操作 给body添加和移除类名
        // 获取按钮
        var btn = document.getElementById('btn');
        // 给按钮绑定点击事件
        btn.onclick = function() {
            // 事件处理函数中，控制body标签的class类名---如果有cls类名则删除，没有就加上
            //获取body标签
            //var body =document.getElementById('body');
            var body = document.body;

            // 方式1 类名操作
            console.log(body.className == ' ');
            if (body.className == ' ') {
                //如果没有类名则添加类名
                body.className = 'cls';
                btn.value = '开灯';
            } else {
                // 如果有类名就删除类名
                body.className = ' ';
                btn.value = '关灯';
            }

            // 方法2 样式操作  有疑似bug，在css中如果已经设置颜色下面操作无效果
            // console.log(body.style.backgroundColor == "");
            // var body_bc = body.style.backgroundColor;
            // if (body.style.backgroundColor == '') {
            //     // 如果样式中背景色没有，就添加上背景色
            //     body.style.backgroundColor = 'black';
            // } else {
            //     // 有背景色的话就删除背景色
            //     body.style.backgroundColor = '';
            // }
        }
    </script>
</body>

</html>